import React, { Component } from "react";
import GoLogin from "../../hoc/GoLogin";
import "./Home.less";
import Examination from "../../images/examination.png";
import Practice from "../../images/practice.png";
import Books from "../../images/books.png";
import Subject from "../../images/subject.png";
import { NavLink as Link } from "react-router-dom";
import { HomeApi } from "../../request/api";

import LinearProgress from "@material-ui/core/LinearProgress";

class Home extends Component {
  state = {
    // 已经学习
    study: 0,
    // 错题
    wrong: 0,
    // 收藏
    collect: 0,
    // 标题内容
    exam: {},
    // 学科列表
    exemItems: [],
  };
  render() {
    return (
      <div className="home_page">
        <header>
          <h2>{this.state.exam.title}</h2>
          <Link
            to={{
              pathname: "/toggle",
              state: { id: this.state.exam.actionCode },
            }}

            // {"/toggle?id="+this.state.exam.actionCode}
          >
            切换考试科目<i className="iconfont icon-xiangyou"></i>
          </Link>
        </header>
        <div className="banner">
          <div className="wecome">欢迎使用IT猿题库！</div>
          <div className="content">
            <div className="left"></div>
            <div className="right">
              <div className="top">
                <span>已学{this.state.study}题</span>
                <span>|</span>
                <span>共{this.state.exam.itemCount}题</span>
              </div>
              <div className="middle">
                <span>{this.state.wrong}</span>
                <span>{this.state.collect}</span>
              </div>
              <div className="bot">
                <span>错题</span>
                <span>收藏</span>
              </div>
            </div>
          </div>
        </div>
        {/* 图片导航 */}
        <div className="pic">
          <img src={Examination} alt="" />
          <img src={Books} alt="" />
          <img src={Practice} alt="" />
        </div>
        {/* 标题 */}
        <div className="title">
          <h2>学科题库</h2>
          <p>坚持每一天，成长看得见</p>
        </div>
        {/* 题库分类 */}
        <div className="tiku">
          <ul>
            {this.state.exemItems.map((item) => {
              return (
                <li key={item.id}>
                  <div className="left">
                    <img src={Subject} alt="" />
                  </div>
                  <div className="center">
                    <p className="one">{item.title}</p>
                    <p className="two">
                      {item.itemCount}/{item.itemCount}题
                    </p>
                    <div className="three">
                      <LinearProgress
                        className="Myprogress"
                        variant="determinate"
                        value={item.itemCount}
                      />
                    </div>
                  </div>
                  <div className="ti_right">练习</div>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }

  componentDidMount() {
    HomeApi({}).then((res) => {
      console.log(res);
      if (res.errCode === 0) {
        let { study, wrong, collect, exam, exemItems } = res.data;
        this.setState({ study, wrong, collect, exam, exemItems });
      }
    });
  }
  // UNASFE_componentDidMount(){
  //     let token=localStorage.getItem('token')
  //     // 判断是否有token,没有token则跳转到登录页
  //     if(!token){
  //         this.props.history.push('/login')
  //     }
  // }
}
// export const b = 3
export default GoLogin(Home);
